<template>
  <view class="container">
    <view class="title">
      MBTI性格类型测试问卷答题结果
    </view>

    <view class="title">各维度总得分</view>
    <view class="title-score">
      <text>E: {{dataObj.ee}}</text>
      <text>I: {{dataObj.ii}}</text>
    </view>
    <view class="title-score">
      <text>S: {{dataObj.ss}}</text>
      <text>N: {{dataObj.nn}}</text>
    </view>
    <view class="title-score">
      <text>T: {{dataObj.tt}}</text>
      <text>F: {{dataObj.ff}}</text>
    </view>
    <view class="title-score">
      <text>J: {{dataObj.jj}}</text>
      <text>P: {{dataObj.pp}}</text>
    </view>

    <view class="blank"></view>
    <view class="content">
      以上八个偏好两两成对，也就是说，E和I、S和N、T和F、J和P各自是一对组合。在每一对组合中，比较该组合中的偏好的得分孰高孰低，高的那个就是您的优势类型。如果同分的话，选择后面的那一组，即I、N、F、P。对四对组合都作一比较后，您会得到一个由4个字母组成的优势类型，如ENFP、ISTJ等等
    </view>
    <view class="blank"></view>
    <view class="ques">
      <view>问卷所揭示的优势类型是(系统评估)：</view>
      <view class="score2 s-disabled">{{dataObj.sysRes}}</view>
    </view>

    <view class="blank"></view>

    <view>
      <view>
        在MBTI性格类型测试问卷结果分析中有对四个纬度八种偏好的详细描述，认真地自我评估一下，究竟对哪种偏好的描述更接近你自己，然后把结果写在下面。
      </view>
      <view class="blank"></view>
      <view class="ques">
        <view>在E和I 这个纬度上，我认为更接近我本性的是：</view>
        <input type="text" class="score" v-model="ei" @blur="fei"/>
      </view>
      <view class="ques">
        <view>在S和N这个纬度上，我认为更接近我本性的是：</view>
        <input type="text" class="score" v-model="sn" @blur="fsn"/>
      </view>
      <view class="ques">
        <view>在T和F这个纬度上，我认为更接近我本性的是：</view>
        <input type="text" class="score" v-model="tf" @blur="ftf"/>
      </view>
      <view class="ques">
        <view>在J和P这个纬度上，我认为更接近我本性的是：</view>
        <input type="text" class="score" v-model="jp" @blur="fjp"/>
      </view>
      <view class="blank"></view>
      <view class="ques">
        <view>自我评价所揭示的优势类型是：</view>
        <input type="text" class="score2" v-model="manualRes" @blur="checkIn16"/>
      </view>
      <view class="ques">
        <view>两者综合，我确定我的优势类型是：</view>
        <input type="text" class="score2" v-model="synthesisRes" @blur="checkIn16"/>
      </view>
    </view>
    <view class="blank"></view>
    <view class="btn-submit" @click="submitForm">保存</view>
    <view class="blank"></view>


    <view class="content">
      <view class="title">附录:</view>
      <view>
        <view class="fl">内倾感觉思维判断（ISTJ）</view>
        <view class="fl">内倾感觉情感判断（ISFJ）</view>
        <view class="fl">内倾直觉情感判断（INFJ）</view>
        <view class="fl">内倾直觉思维判断（INTJ）</view>
        <view class="fl">内倾感觉思维知觉（ISTP）</view>
        <view class="fl">内倾感觉情感知觉（ISFP）</view>
        <view class="fl">内倾直觉情感知觉（INFP）</view>
        <view class="fl">内倾直觉思维知觉（INTP）</view>
        <view class="fl">外倾感觉思维知觉（ESTP）</view>
        <view class="fl">外倾感觉情感知觉（ESFP）</view>
        <view class="fl">外倾直觉情感知觉（ENFP）</view>
        <view class="fl">外倾直觉思维知觉（ENTP）</view>
        <view class="fl">外倾感觉思维判断（ESTJ）</view>
        <view class="fl">外倾感觉情感判断（ESFJ）</view>
        <view class="fl">外倾直觉情感判断（ENFJ）</view>
        <view class="fl">外倾直觉思维判断（ENTJ）</view>
      </view>
    </view>
    <view class="blank"></view>

    <!--    //-->
  </view>
</template>

<script>
import {request} from "@/utils/requestV2";
export default {
  data() {
    return {
      loading: false,
      ei: '',
      sn: '',
      tf: '',
      jp: '',
      manualRes: '',
      synthesisRes: '',
      id: '',
      dataObj: {},
      errNum: 0
    }
  },
  onLoad(option) {
    this.id = option.id
    this.init(option.id)
  },
  methods: {
   async init(id) {
     let res = await request("/buss/stuqa/getInfo?id=" + id)
     if (res.code === 200) {
       let A = parseInt(res.data.ee) >= parseInt(res.data.ii) ? "E" : "I"
       let B = parseInt(res.data.ss) >= parseInt(res.data.nn) ? "S" : "N"
       let C = parseInt(res.data.tt) >= parseInt(res.data.ff) ? "T" : "F"
       let D = parseInt(res.data.jj) >= parseInt(res.data.pp) ? "J" : "P"
       console.log("=========A========>",A, B, C,D)
       res.data.sysRes = A + B + C + D
       this.dataObj = res.data
     }
   },

    fei(e, type=1){
      let inputValue =e
       if(type===1){
         inputValue = e.target.value;
       }
      let lowerCaseStr = inputValue.toLowerCase();
      if(!['e','i'].includes(lowerCaseStr)){
        uni.showToast({
          icon: "none",
          title: "EI维度上只能填写字母E或I"
        })
        return false
      }
      return true
    },
    fsn(e, type=1){
      console.log("=====fsn======e======>",e)
      let inputValue =e
      if(type===1){
        inputValue = e.target.value;
      }
      let lowerCaseStr = inputValue.toLowerCase();
      if(!['s','n'].includes(lowerCaseStr)){
        uni.showToast({
          icon: "none",
          title: "SN维度上只能填写字母S或N"
        })
        return false
      }
      return true
    },
    ftf(e, type=1){
      let inputValue =e
      if(type===1){
        inputValue = e.target.value;
      }
      let lowerCaseStr = inputValue.toLowerCase();
      if(!['t','f'].includes(lowerCaseStr)){
        uni.showToast({
          icon: "none",
          title: "TF维度上只能填写字母T或F"
        })
        return false
      }
      return true
    },
    fjp(e, type=1){
      let inputValue =e
      if(type===1){
        inputValue = e.target.value;
      }
      let lowerCaseStr = inputValue.toLowerCase();
      if(!['j','p'].includes(lowerCaseStr)){
        uni.showToast({
          icon: "none",
          title: "JP维度上只能填写字母J或P"
        })
        return false
      }
      return true
    },
    checkIn16(e, type=1){
      let inputValue =e
      if(type===1){
        inputValue = e.target.value;
      }
      let lowerCaseStr = inputValue.toUpperCase();
      const result = ["ISTJ", "ISFJ", "INFJ", "INTJ", "ISTP", "ISFP", "INFP", "INTP", "ESTP", "ESFP", "ENFP", "ENTP", "ESTJ", "ESFJ", "ENFJ", "ENTJ"];
      if(!result.includes(lowerCaseStr)){
        uni.showToast({
          icon: "none",
          title: "自我评价和综合选项答案只能是附录中的其中一组字母组合。 例如：ISTJ "
        })
        return false
      }
      return true
    },

   async submitForm() {
     if (this.loading) {
       uni.showToast({
         icon: "none",
         title: "请勿重复提交"
       })
       return
     }

     if(!this.fei(this.ei,2)) return;
     console.log("=======1==========>", this.errNum)
     if(!this.fsn(this.sn,2)) return;
     console.log("========2=========>", this.errNum)
     if(!this.ftf(this.tf,2)) return;
     if(!this.fjp(this.jp,2)) return;
     console.log("=======3==========>", this.errNum)
     if(!this.checkIn16(this.manualRes,2)) return;
     if(!this.checkIn16(this.synthesisRes, 2)) return;

     //save
     let payload = {
       id: this.id,
       ei: this.ei,
       sn: this.sn,
       tf: this.tf,
       jp: this.jp,
       manualRes: this.manualRes,
       synthesisRes: this.synthesisRes
     }

     console.log("========payload=========>", payload)
     let res = await request("/buss/stuqa/updateqa", payload, "POST")
     this.loading = false
     console.log("=========res========>", res)

     if (res.code === 200) {
       uni.showToast({
         title: "保存成功"
       })
     } else {
       uni.showToast({
         icon: "none",
         title: res.msg
       })
     }

     //
   }
  }
}
</script>

<style lang="scss" scoped>
.container {
  font-size: 14px;
  padding: 30px 15px;
  color: #333333;
  line-height: 25px;
}

.title-score {
  display: flex;
  justify-content: space-between;
  align-items: center;
  >text{
    width: 50%;
    border-bottom: 1px solid #f2f2f2;
    line-height: 40px;
  }
}

.tip {
  background-color: #fdcdcd;
  padding: 15px;
}

.title {
  font-size: 14px;
  color: #333;
  font-weight: bold;
  text-align: center;
}
.ques{
  display: flex;
  margin: 5px 0;
}
.score {
  width: 40px;
  height: 25px;
  border: 1px solid #999;
  text-align: center;
}

.score2 {
  width: 60px;
  height: 25px;
  border: 1px solid #999;
  text-align: center;
}
.s-disabled{
  background-color: #eee;
}

.btn-submit{
  padding: 15px 0;
  background-color: #42b983;
  text-align: center;
  color: #ffffff;
}



</style>